<template>
  <el-dialog class="redDialog" :visible.sync="dialogVisible" :before-close="handleClose" width="95%">
    <div class="diskInfoWrap">
      <div class="head">
        <p class="colCLas"></p>
        <p class="info">数电红字确认单列表查询</p>
      </div>

      <el-form
          :model="fromData"
          size="small"
          label-width="140px"
          class="formInline"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="红字确认单编号：">
              <el-input
                  maxlength="20"
                  v-model="fromData.hzfpxxqrdbh"
                  placeholder="请输入"
              ></el-input>

            </el-form-item>

          </el-col>

          <el-col :span="8">
            <el-form-item label="蓝字发票号码：">
              <el-input
                  v-model="fromData.lzfphm"
                  placeholder="请输入"
                  maxlength="20"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="冲红原因：">
              <selectCom
                  v-model="fromData.chyydm"
                  :options="[
                                    {'label':'开票有误','value':'01'},
                                    {'label':'销货退回','value':'02'},
                                    {'label':'服务中止','value':'03'},
                                    {'label':'销售折让','value':'04'},
                                    ]"
                  style="width: 100%"
              ></selectCom>
            </el-form-item>

          </el-col>


        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="红字确认单状态：">
              <selectCom
                  v-model="fromData.hzqrxxztdm"
                  :options="[
                      {'label':'无需确认','value':'01'},
                      {'label':'购销双方已确认','value':'04'}
                      ]"
                  style="width: 100%"
              ></selectCom>

            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="蓝字发票代码：">
              <el-input
                  v-model="fromData.lzfpdm"
                  placeholder="请输入"
                  maxlength="12"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="购买方名称：">
              <el-input
                  v-model="fromData.gmfmc"
                  placeholder="请输入"
                  maxlength="100"
              ></el-input>
            </el-form-item>
          </el-col>


        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="红字确认单申请日期：">
              <el-date-picker
                  v-model="fromData.applyDate"
                  type="datetimerange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="蓝字发票开具日期：">
              <el-date-picker
                  v-model="fromData.kpDate"
                  type="datetimerange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="购买方纳税人识别号：">
              <el-input
                  v-model="fromData.gmfnsrsbh"
                  placeholder="请输入"
                  maxlength="18"
              ></el-input>
            </el-form-item>
          </el-col>


        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="红字确认单确认日期：">
              <el-date-picker
                  v-model="fromData.confirmationDate"
                  type="datetimerange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <div style="float: right">
              <el-button size="small" type="primary" @click="search">
                查询
              </el-button>
              <el-button size="small" type="primary" @click="search('reset')">
                重置
              </el-button>
            </div>
          </el-col>

        </el-row>
      </el-form>

      <tableList
          :showIndex="true"
          border
          heightMin="380"
          :keySet="keySet"
          :autoHeight="true"
          :tableData="listDetails"
          :showSelection="true"
          :paginationShow="true"
          :pageNumber="pages.current"
          :pageSize="pages.size"
          :total="pages.total"
          ref="table"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
          @handleSelectionChange="handleSelectionChange"
      >
        <template #chyydm="{ row }">
          <div>
            {{ chyyMap[row.chyydm] }}
          </div>
        </template>
        <template #hzqrxxztdm="{ row }">
          <div>
            {{ row.hzqrxxztdm == '01' ? '无需确认' : '购销双方已确认' }}
          </div>
        </template>
      </tableList>
    </div>
    <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
  </el-dialog>
</template>

<script>
import mixinTable from '@/mixin/mtable.js'
import tableList from '@/components/tableList/index.vue'
import selectCom from '@/components/selectCom.vue'
import {getRedList} from "@/api/manualNegativeInvoice";

export default {
  name: 'homePage',
  mixins: [mixinTable],
  model: {
    prop: 'dialogVisible',
    event: 'close' //这个要是close
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      timer: null,
      dictList: [],
      listDetails: [],
      keySet: [
        {
          label: '购买方名称',
          englishName: 'gmfmc',
        },
        {
          label: '购买方纳税人识别号',
          englishName: 'gmfnsrsbh',
          width: 150
        },
        {
          label: '红字确认单编号',
          englishName: 'hzfpxxqrdbh',
          width: 120
        },
        {
          label: '红字确认单状态',
          englishName: 'hzqrxxztdm',
          width: 120,
          isSlot: true,
          slotName: 'hzqrxxztdm',
        },
        {
          label: '红冲原因',
          englishName: 'chyydm',
          isSlot: true,
          slotName: 'chyydm',
        },
        {
          label: '蓝字发票号码',
          englishName: 'lzfphm',
        },
        {
          label: '蓝字发票代码',
          englishName: 'lzfpdm',
        },
        {
          label: '蓝字发票开具日期',
          englishName: 'lzkprq',
          width: 150
        },
        {
          label: '红字确认单申请日期',
          englishName: 'lrrq',
          width: 150
        },
        {
          label: '红字确认单确定日期',
          englishName: 'qrrq',
          width: 150
        },
        {
          label: '蓝字发票合计金额',
          englishName: 'lzhjje',
          width: 150
        },
        {
          label: '蓝字发票合计税额',
          englishName: 'lzhjse',
          width: 150
        },
        {
          label: '冲销金额',
          englishName: 'hzcxje',
        },
        {
          label: '冲销税额',
          englishName: 'hzcxse',
        },
      ],
      fromData: {
        lzfpdm: '',
        lzfphm: '',
        hzfpxxqrdbh: '',
        hzqrxxztdm: '',
        chyydm: '',
        gmfmc: '',
        gmfnsrsbh: '',
        lzfpkprqq: '',
        lzfpkprqz: '',
        hzqrdsqrqq: '',
        hzqrdsqrqz: '',
        hzqrdqrrqq: '',
        hzqrdqrrqz: '',
        applyDate: [],
        confirmationDate: [],
        kpDate: [],
      },
      redRow: {},
      chyyMap: {
        "01": "开票有误",
        "02": "销货退回",
        "03": "服务中止",
        "04": "销售折让",
      },
    }
  },
  methods: {
    search(flag) {
      if (flag === 'reset') {
        this.fromData = {}
      }
      this.getList()
    },
    confirm() {
      this.$emit('sednHzfpqrdbh', this.redRow)
      this.handleClose()
    },
    handleClose() {
      this.fromData = {}
      this.$emit('close', false)
    },
    async getList() {
      this.setDate();
      const {code, data, msg} = await getRedList(this.fromData);
      this.listDetails = data.records
      this.pages.total = data.total
      this.pages.current = data.current
      this.pages.size = data.size
    },
    setDate() {
      if (this.fromData.applyDate) {
        this.fromData.hzqrdsqrqq = this.fromData.applyDate[0]
        this.fromData.hzqrdsqrqz = this.fromData.applyDate[1]
      } else {
        this.fromData.hzqrdsqrqq = ""
        this.fromData.hzqrdsqrqz = ""
      }
      if (this.fromData.confirmationDate) {
        this.fromData.hzqrdqrrqq = this.fromData.confirmationDate[0]
        this.fromData.hzqrdqrrqz = this.fromData.confirmationDate[1]
      } else {
        this.fromData.hzqrdqrrqq = ""
        this.fromData.hzqrdqrrqz = ""
      }
      if (this.fromData.kpDate) {
        this.fromData.lzfpkprqq = this.fromData.kpDate[0]
        this.fromData.lzfpkprqz = this.fromData.kpDate[1]
      } else {
        this.fromData.lzfpkprqq = ""
        this.fromData.lzfpkprqz = ""
      }
    },
    handleSelectionChange(val) {
      if (val.ids.length > 1) {
        this.$refs.table.$refs.table.clearSelection()
        this.$refs.table.$refs.table.toggleRowSelection(
            val.ids[val.ids.length - 1]
        )
      }
      this.redRow = val.ids[val.ids.length - 1]
    }
  },
  components: {
    tableList,
    selectCom,
  },
}
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';

.diskInfoWrap {
  box-sizing: border-box;

  .head {
    display: flex;
    height: 18px;
    align-items: center;
    margin-bottom: 4px;

    .colCLas {
      width: 4px;
      height: 100%;
      background-color: $allBg;
      margin-right: 12px;
    }

    .info {
      height: 100%;
      display: flex;
      align-items: center;
    }
  }
}

::v-deep .el-dialog {
  margin-top: 50px !important;
}

.formInline :deep .el-form-item--small {
  margin-bottom: 4px;
}
</style>
